import {
  addUserRoleApi,
  getUserPermissionListApi,
  getUserRoleListApi,
  updateUserRoleApi,
} from '@/services/api';
import {
  DrawerForm,
  ProFormInstance,
  ProFormItem,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useRequest } from 'ahooks';
import { Form, Tree, message } from 'antd';
import { isEqual } from 'lodash';
import React, { useRef } from 'react';
interface Props {
  open?: boolean;
  info?: any;
  close?: () => void;
  onFinish?: () => void;
  type?: string;
}

const CreateBindRuleDrawer: React.FC<Props> = ({
  open,
  close,
  info,
  onFinish,
  type,
}) => {
  const [form] = Form.useForm();

  const formRef = useRef<ProFormInstance>();

  // 获取角色列表
  const { data: roleList } = useRequest(async () => {
    const _res = await getUserRoleListApi({});

    return _res?.data?.list;
  });

  // 获取权限树
  const { data: permissionList } = useRequest(async () => {
    const _res = await getUserPermissionListApi({});

    return _res?.data;
  });
  console.log('permissionList', permissionList);
  return (
    <DrawerForm
      formRef={formRef}
      title={info.id ? '编辑角色权限配置' : '新建角色权限配置'}
      form={form}
      open={open}
      width={'38%'}
      onOpenChange={(visible) => {
        if (!visible) {
          close?.();
        }
      }}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      initialValues={{ ...info }}
      onFinish={async (values) => {
        console.log('values', values);
        return;

        try {
          // 如果是新增
          if (type === 'add') {
            const { msg } = await addUserRoleApi({
              ...values,
              parent: info.id ? info.id : undefined,
              // parent_id: ''
            });

            message.success(msg);
          } else {
            const { msg } = await updateUserRoleApi(info?.id, {
              ...values,
              parent: info.id ? info.id : undefined,
            });

            message.success(msg);
          }

          onFinish?.();
          // 不返回不会关闭弹框
          return true;
        } catch (error) {}
      }}
    >
      <ProFormText
        width="lg"
        name="title"
        label="配置名称"
        placeholder="请输入配置名称"
        rules={[
          {
            required: true,
          },
        ]}
      />

      <ProFormSelect
        label="角色"
        name="role"
        placeholder="请选择角色"
        options={roleList?.map((_item) => {
          return {
            label: _item.title,
            value: _item.id,
          };
        })}
        rules={[
          {
            required: true,
          },
        ]}
      ></ProFormSelect>

      {/* <ProFormItem name="权限" label="权限">
        <TreeSelect
          treeCheckable
          showCheckedStrategy="SHOW_ALL"
          placeholder="请配置权限"
          treeData={permissionList}
        />
      </ProFormItem> */}

      <ProFormItem name="权限2" label="权限">
        <Tree
          checkable
          treeData={permissionList}
          fieldNames={{
            title: 'label',
            key: 'id',
            children: 'children',
          }}
          onSelect={(val) => {
            console.log('val', val);
          }}
          onCheck={(val) => {
            console.log('val', val);
          }}
        />
      </ProFormItem>
    </DrawerForm>
  );
};

export default React.memo(CreateBindRuleDrawer, (prev, next) =>
  isEqual(prev, next),
);
